<template>
  <div class="container">
    <div class="full-width-image">
      <img :src="require(`@/assets/home/home-main.jpg`)" alt="Full Width Image" class="image"/>
      <div class="overlay">
        <div style="display: flex;justify-content: space-between;align-items: center;width: 100%">
          <div style="display: flex;align-items: center;">
            <!--            <el-input v-model="searchText" placeholder="搜索" class="search-box"-->
            <!--                      prefix-icon="el-icon-search"></el-input>-->
            <b class="image-text">{{ $store.state.username }}, 一起探索</b>
          </div>
          <el-button type="primary" icon="el-icon-share" class="login-out-button" @click="loginOut">退出登录</el-button>
        </div>
      </div>
    </div>

    <div class="bottom">
      <el-row>
        <el-col :span="6" offset="5">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>新闻动态</b>
            </div>
            <div v-for="item in newsFiveData.data" :key="item" class="text item">
              <el-popover
                  placement="right"
                  :title="item.title"
                  width="500"
                  trigger="click"
                  :content="item.content">
                <el-link slot="reference">{{ item.title }}</el-link>
              </el-popover>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" offset="2">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>旅游攻略</b>
            </div>
            <div v-for="item in guideFiveData.data" :key="item" class="text item">
              <el-popover
                  placement="right"
                  :title="item.title"
                  width="500"
                  trigger="click"
                  :content="item.content">
                <el-link slot="reference">{{ item.title }}</el-link>
              </el-popover>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


    <div class="tables">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="热门景点" name="first">

          <el-row>
            <el-col :span="4" v-for="(item, index) in attractionsFiveData.data" :key="item" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="require(`@/assets/home/local/img.png`)" class="image" alt="city img">
                <div style="padding: 16px;">
                  <el-popover
                      placement="top"
                      :title="item.name"
                      width="500"
                      trigger="click"
                      :content="item.description">
                    <el-link slot="reference">{{ item.name }}</el-link>
                  </el-popover>
                  <div class="bottom clearfix">
                    <time class="time">{{ item.address }}</time>
                    <!--                    <el-button type="text" class="button">操作按钮</el-button>-->
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="特色美食" name="second">
          <el-row>
            <el-col :span="4" v-for="(item, index) in cuisineFiveData.data" :key="item" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="require(`@/assets/home/local/img.png`)" class="image" alt="city img">
                <div style="padding: 16px;">
                  <el-popover
                      placement="top"
                      :title="item.name"
                      width="500"
                      trigger="click"
                      :content="item.description">
                    <el-link slot="reference">{{ item.name }}</el-link>
                  </el-popover>
<!--                  <div class="bottom clearfix">-->
<!--                    <time class="time">{{ item.address }}</time>-->
<!--                    <el-button type="text" class="button">操作按钮</el-button>-->
<!--                  </div>-->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  computed: {
    username() {
      return this.$store.state.username
    }
  },
  data() {
    return {
      currentDate: new Date(),
      searchText: '',
      activeName: 'first',
      newsFiveData: null,
      guideFiveData: null,
      attractionsFiveData: null,
      cuisineFiveData: null,
      visible: false
    };
  },
  created() {
    this.newsGetFive();
    this.guideGetFive();
    this.attractionsGetFive();
    this.cuisineGetFive();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    newsGetFive() {
      axios.get('http://localhost:8077/tourism/www/news/getFive')
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.msg);
            } else {
              this.newsFiveData = response.data
            }
          })
          .catch(error => {
            console.error('Error during register:', error);
          })
    },
    guideGetFive() {
      axios.get('http://localhost:8077/tourism/www/guide/getFive')
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.msg);
            } else {
              this.guideFiveData = response.data
            }
          })
          .catch(error => {
            console.error('Error during register:', error);
          })
    },
    attractionsGetFive() {
      axios.get('http://localhost:8077/tourism/www/attractions/getFive')
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.msg);
            } else {
              this.attractionsFiveData = response.data
              console.log(this.attractionsFiveData)
            }
          })
          .catch(error => {
            console.error('Error during register:', error);
          })
    },
    cuisineGetFive() {
      axios.get('http://localhost:8077/tourism/www/cuisine/getFive')
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.msg);
            } else {
              this.cuisineFiveData = response.data
            }
          })
          .catch(error => {
            console.error('Error during register:', error);
          })
    },
    loginOut() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}


::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}

::v-deep .el-tabs__item:hover, .el-tabs__item:hover:active {
  color: rgb(47, 47, 47);
  font-weight: bold;
}

::v-deep .el-tabs__item {
  color: rgb(115, 115, 115);
  font-weight: bold;
  font-size: 20px;
}

::v-deep .is-active {
  color: rgb(47, 47, 47) !important;
  text-decoration: underline
}

::v-deep .el-tabs__active-bar {
  display: none;
}

.first-button {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.login-out-button {
  border-radius: 20px;
}

.last-button {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.full-width-image {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  color: white;
}


.search-box {
  width: 300px;

}

.image-text {
  margin: 0 20px;
}

::v-deep .el-input__inner {
  background-color: rgba(255, 255, 255, 0.5) !important;
  //background-color: transparent !important; /* 设置透明背景 */ border-radius: 20px; /* 调整输入框的左右圆角大小 */
  border-color: skyblue;
}

.el-button--primary {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: skyblue;
}

.el-button:hover {
  color: skyblue;
  background-color: rgba(255, 255, 255, 1) !important;
}


.tables {
  margin: 20px 50px;
}

.container {
  background-color: rgb(204, 204, 204);
}


.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
